<script setup>
import OImage from "../../setting/Images.vue";
import Color from "../../setting/Color.vue";
import PrizePopupSelect from "../../setting/PrizePopupSelect.vue";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  group: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(["update:config", "change"]);

const form = ref({
  $position: { top: 0, left: 20 },
  $size: { width: 333, height: 333 },
  $removeable: true,
  img: "./imagesStatic/activity/turntable_bg.png",
  pointerImg: "./imagesStatic/activity/turntable_btn.png",
  pointerSize: {
    width: 65,
    height: 113,
  },
  pointerPosition: {
    left: 135,
    top: 110,
  },
  lineStyle: "none",
  lineColor: "#6F8BF5",
  linePosition: {
    top: 18,
    left: 18,
  },
  lineSize: {
    width: 295,
    height: 295,
  },
  textColor: "#FF7D00",
});

const formRef = ref();

const options = [
  {
    label: "----------------------",
    value: "dashed",
  },
  {
    label: "——————————————————————",
    value: "solid",
  },
  {
    label: "(无)",
    value: "none",
  },
];

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const onChange = (val, type) => {
  detail.value = detail.value;
};

// 表单校验
const check = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate(async (valid, invalidFields) => {
      if (valid) {
        resolve();
      } else
        reject(
          `${props.name}校验未通过，${
            invalidFields[Object.keys(invalidFields)[0]][0].message
          }`
        );
    });
  });
};

onMounted(() => {
  nextTick(() => {
    onChange();
  });
});

defineExpose({ check });
</script>
<template>
  <el-form
    ref="formRef"
    :model="detail"
    :disabled="disabled"
    label-width="auto"
  >
    <PrizePopupSelect v-model="detail" :group="group" @change="onChange" />
    <el-form-item label="分割线样式:" prop="lineStyle">
      <el-select
        v-model="detail.lineStyle"
        placeholder="请选择样式"
        @change="onChange"
      >
        <el-option
          v-for="item in options"
          :label="item.label"
          :value="item.value"
          class="equalFont"
        />
      </el-select>
    </el-form-item>
    <Color
      v-if="detail.lineStyle !== 'none'"
      v-model="detail.lineColor"
      name="分割线颜色"
      @change="onChange"
    />
    <Color v-model="detail.textColor" name="文字颜色" @change="onChange" />
    <OImage
      v-model="detail.img"
      v-model:size="detail.$size"
      name="转盘图"
      @change="onChange"
    />
    <OImage
      v-model="detail.pointerImg"
      v-model:size="detail.pointerSize"
      name="转盘指针"
      @change="onChange"
    />
  </el-form>
</template>
